
<template>
  <div class="app-container">
    <div style="display:flex;justify-content: space-between;width: 40%;margin: 0 auto;">
      <div class="block">
        <el-date-picker v-model="date" value-format="yyyy-MM-dd" type="date" @change="dateChange()" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div>
        <el-input placeholder="请输入会议室名称" clearable v-model="roomName">
          <el-button @click="nameChange()" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>

    <div style="width: 40%;margin: 10px auto;height:60%;overflow-y: auto,">
      <div v-for="(item, index) in roomList" :key="index" style="width: 100%;background-color: #fff;margin-top: 8px;">
        <el-col :span="24" style="margin-top: 8px">
          <el-card shadow="hover">
            <div style="width: 93%;margin: 0 auto;display: flex;justify-content: space-between;">
              <div>
                <div style="font-size: 32rpx;color: #000;margin-top: 8px;">{{ item.fpointName }}</div>
                <div style="font-size: 13px;color: #909399;margin-top: 4px;">所有用户/无审核</div>
                <div style="display: flex;">
                  <div style="font-size: 13px;color: #909399;margin-top: 8px;display: flex;align-items: flex-end;">
                    <img style="max-width: 20px;max-height: 20px;margin-right:2px;"
                      src="../../../public/images/ry.png" />
                    <div>{{ item.fcustnum }}</div>
                  </div>
                  <div style="font-size: 13px;color: #909399;margin: 8px 0 0 12px;display: flex;align-items: flex-end">
                    <img style="max-width: 18px;max-height: 18px;margin-right:5px;"
                      src="../../../public/images/hys.png" />
                    <div>{{ item.fsize }}</div>
                  </div>
                </div>
              </div>
              <div>
                <img style="max-width: 120px;max-height: 80px;margin-top: 14px;border-radius: 6px" :src="item.fimage" />
              </div>
            </div>

            <div style="width: 92%;border-ardius: 5px;margin: 8px auto;display: flex;" @click="roomClick(item)">
              <div class="timer" v-for="d in timeLegend" :key="d.label" style="cursor:pointer">
                <div
                  style="width: 100%;height: 15px;display: flex;border-bottom: 1px solid #eeeeef;border-top: 1px solid #eeeeef;">
                  <div v-for="(items, index) in d.data" :key="index" style="width: 25%;height: 100%">
                    <div v-if="items.isChoose == 2" class="timeDisColor" style="width: 100%;height: 100%"></div>
                    <div v-else-if="items.isChoose == 0" style="width: 100%;height: 100%"></div>
                    <div v-else class="timeChooseColor" style="width: 100%;height: 100%"></div>
                  </div>
                </div>

                <el-popover placement="bottom" width="400" trigger="click">
                  <div style="height: 280px !important;width: 100%;overflow-y: auto;position: relative;">
                    <div v-for="(e, ids) in timeList" :key="e.value"
                      style="display:flex;justify-content: space-between;">
                      <el-checkbox-group v-model="checkList" style="margin-top: 5px">
                        <div v-if="e.isUse == 2">
                          <el-checkbox disabled :label="e.label"></el-checkbox>
                        </div>
                        <div v-else-if="e.isUse == 1">
                          <el-checkbox disabled :label="e.label"></el-checkbox>
                        </div>
                        <div v-else>
                          <el-checkbox @change="checkboxChange(e, ids)" :label="e.label"></el-checkbox>
                        </div>
                      </el-checkbox-group>
                      <span v-if="e.isUse == 2">
                        已过期
                      </span>
                      <span style="color: #409eff" v-else-if="e.isUse == 1">
                        已预约
                      </span>
                    </div>
                  </div>

                  <span slot="reference" style="cursor: pointer">{{ d.label }}</span>
                  <el-button v-if="checkList.length > 0" @click="nowOrder()" type="primary"
                    style="width: 100%;height: 40px;z-index: 999999;">立即预定
                  </el-button>
                  <el-button v-else disabled type="primary" style="width: 100%;height: 40px;z-index: 999999;">立即预定
                  </el-button>
                </el-popover>
              </div>
            </div>
          </el-card>
        </el-col>
      </div>
    </div>
    <!-- 会议室预约弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="750px" :close-on-click-modal="false" :before-close="handleClose">
      <template slot="title">
        <div :style="exportColor">预定会议室</div>
      </template>
      <el-form class="onlyForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="预定时间">
          <div>
            {{ orderdate }} {{ orderweek }} {{ ordertime }}
          </div>
        </el-form-item>
        <el-form-item label="会议主题">
          <el-input v-model="ruleForm.theme" placeholder="请输入会议主题"></el-input>
        </el-form-item>
        <el-form-item label="主持人">
          <el-select v-model="ruleForm.compereId" placeholder="请选择主持人">
            <el-option v-for="(item, index) in userList" :key="index" :label="item.username"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参会人员">
          <el-select multiple v-model="ruleForm.attendances" placeholder="请选择参会人员">
            <el-option v-for="(item, index) in userList" :key="index" :label="item.username"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" maxlength="256" show-word-limit v-model="ruleForm.memo"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submint()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { tsTaskuserlist, listdataRoom } from "@/api/meetingManage";
import { bookingbook } from "@/api/meetingManagecopy";
import moment from 'moment'
import { exportColor } from '@/filters/index'
export default {
  name: 'orderMeeting',
  data() {
    return {
      exportColor,
      date: '',
      roomList: [],
      roomName: '', // 会议室名称
      timeLegend: [],// 时间选择图例
      timeListTemp: [], // 时间列表
      timeList: [], // 时间列表
      checkList: [], //时间选择
      checkListValue: [], //时间选择值 value
      roomSelectId: '', // 选择的会议室id
      dialogVisible: false, // 预约弹窗
      orderdate: '', // 预约日期
      ordertime: '', // 预约时间
      orderweek: '', // 预约星期几
      userList: [], // 用户
      ruleForm: {
        theme: '',
        compereId: '',
        compereName: '',
        memo: '',
        ftaskno: '',
        attendances: [],
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    this.date = new Date()
    // this.getlistdataRoom()
    this.getRoomList()
    // 0未使用 1已预约 2已过期
    this.timeListTemp = [
      { label: '6:00~6:15', value: '600', isChecked: false, isUse: 0 },
      { label: '6:15~6:30', value: '615', isChecked: false, isUse: 0 },
      { label: '6:30~6:45', value: '630', isChecked: false, isUse: 0 },
      { label: '6:45~7:00', value: '645', isChecked: false, isUse: 0 },
      { label: '7:00~7:15', value: '700', isChecked: false, isUse: 0 },
      { label: '7:15~7:30', value: '715', isChecked: false, isUse: 0 },
      { label: '7:30~7:45', value: '730', isChecked: false, isUse: 0 },
      { label: '7:45~8:00', value: '745', isChecked: false, isUse: 0 },
      { label: '8:00~8:15', value: '800', isChecked: false, isUse: 0 },
      { label: '8:15~8:30', value: '815', isChecked: false, isUse: 0 },
      { label: '8:30~8:45', value: '830', isChecked: false, isUse: 0 },
      { label: '8:45~9:00', value: '845', isChecked: false, isUse: 0 },
      { label: '9:00~9:15', value: '900', isChecked: false, isUse: 0 },
      { label: '9:15~9:30', value: '915', isChecked: false, isUse: 0 },
      { label: '9:30~9:45', value: '930', isChecked: false, isUse: 0 },
      { label: '9:45~10:00', value: '945', isChecked: false, isUse: 0 },
      { label: '10:00~10:15', value: '1000', isChecked: false, isUse: 0 },
      { label: '10:15~10:30', value: '1015', isChecked: false, isUse: 0 },
      { label: '10:30~10:45', value: '1030', isChecked: false, isUse: 0 },
      { label: '10:45~11:00', value: '1045', isChecked: false, isUse: 0 },
      { label: '11:00~11:15', value: '1100', isChecked: false, isUse: 0 },
      { label: '11:15~11:30', value: '1115', isChecked: false, isUse: 0 },
      { label: '11:30~11:45', value: '1130', isChecked: false, isUse: 0 },
      { label: '11:45~12:00', value: '1145', isChecked: false, isUse: 0 },
      { label: '12:00~12:15', value: '1200', isChecked: false, isUse: 0 },
      { label: '12:15~12:30', value: '1215', isChecked: false, isUse: 0 },
      { label: '12:30~12:45', value: '1230', isChecked: false, isUse: 0 },
      { label: '12:45~13:00', value: '1245', isChecked: false, isUse: 0 },
      { label: '13:00~13:15', value: '1300', isChecked: false, isUse: 0 },
      { label: '13:15~13:30', value: '1315', isChecked: false, isUse: 0 },
      { label: '13:30~13:45', value: '1330', isChecked: false, isUse: 0 },
      { label: '13:45~14:00', value: '1345', isChecked: false, isUse: 0 },
      { label: '14:00~14:15', value: '1400', isChecked: false, isUse: 0 },
      { label: '14:15~14:30', value: '1415', isChecked: false, isUse: 0 },
      { label: '14:30~14:45', value: '1430', isChecked: false, isUse: 0 },
      { label: '14:45~15:00', value: '1445', isChecked: false, isUse: 0 },
      { label: '15:00~15:15', value: '1500', isChecked: false, isUse: 0 },
      { label: '15:15~15:30', value: '1515', isChecked: false, isUse: 0 },
      { label: '15:30~15:45', value: '1530', isChecked: false, isUse: 0 },
      { label: '15:45~16:00', value: '1545', isChecked: false, isUse: 0 },
      { label: '16:00~16:15', value: '1600', isChecked: false, isUse: 0 },
      { label: '16:15~16:30', value: '1615', isChecked: false, isUse: 0 },
      { label: '16:30~16:45', value: '1630', isChecked: false, isUse: 0 },
      { label: '16:45~17:00', value: '1645', isChecked: false, isUse: 0 },
      { label: '17:00~17:15', value: '1700', isChecked: false, isUse: 0 },
      { label: '17:15~17:30', value: '1715', isChecked: false, isUse: 0 },
      { label: '17:30~17:45', value: '1730', isChecked: false, isUse: 0 },
      { label: '17:45~18:00', value: '1745', isChecked: false, isUse: 0 },
      { label: '18:00~18:15', value: '1800', isChecked: false, isUse: 0 },
      { label: '18:15~18:30', value: '1815', isChecked: false, isUse: 0 },
      { label: '18:30~18:45', value: '1830', isChecked: false, isUse: 0 },
      { label: '18:45~19:00', value: '1845', isChecked: false, isUse: 0 },
      { label: '19:00~19:15', value: '1900', isChecked: false, isUse: 0 },
      { label: '19:15~19:30', value: '1915', isChecked: false, isUse: 0 },
      { label: '19:30~19:45', value: '1930', isChecked: false, isUse: 0 },
      { label: '19:45~20:00', value: '1945', isChecked: false, isUse: 0 },
      { label: '20:00~20:15', value: '2000', isChecked: false, isUse: 0 },
      { label: '20:15~20:30', value: '2015', isChecked: false, isUse: 0 },
      { label: '20:30~20:45', value: '2030', isChecked: false, isUse: 0 },
      { label: '20:45~21:00', value: '2045', isChecked: false, isUse: 0 },
      { label: '21:00~21:15', value: '2100', isChecked: false, isUse: 0 },
      { label: '21:15~21:30', value: '2115', isChecked: false, isUse: 0 },
      { label: '21:30~21:45', value: '2130', isChecked: false, isUse: 0 },
      { label: '21:45~22:00', value: '2145', isChecked: false, isUse: 0 },
      { label: '22:00~22:15', value: '2200', isChecked: false, isUse: 0 },
      { label: '22:15~22:30', value: '2215', isChecked: false, isUse: 0 },
      { label: '22:30~22:45', value: '2230', isChecked: false, isUse: 0 },
      { label: '22:45~23:00', value: '2245', isChecked: false, isUse: 0 },
    ]

    // 2已禁用 0 未预约 1已预约
    this.timeLegend = [
      {
        label: '7',
        value: '700',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '8',
        value: '800',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '9',
        value: '900',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '10',
        value: '1000',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '11',
        value: '1100',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '12',
        value: '1200',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '13',
        value: '1300',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '14',
        value: '1400',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '15',
        value: '1500',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '16',
        value: '1600',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '17',
        value: '1700',
        data: [
          { temp: '1', isChoose: 2 },
          { temp: '2', isChoose: 2 },
          { temp: '3', isChoose: 2 },
          { temp: '4', isChoose: 2 },
        ]
      },
      {
        label: '18',
        value: '1800',
        data: [
          { temp: '1', isChoose: 0 },
          { temp: '2', isChoose: 0 },
          { temp: '3', isChoose: 0 },
          { temp: '4', isChoose: 0 },
        ]
      },
      {
        label: '19',
        value: '1900',
        data: [
          { temp: '1', isChoose: 0 },
          { temp: '2', isChoose: 0 },
          { temp: '3', isChoose: 1 },
          { temp: '4', isChoose: 1 },
        ]
      },
      {
        label: '20',
        value: '2000',
        data: [
          { temp: '1', isChoose: 0 },
          { temp: '2', isChoose: 0 },
          { temp: '3', isChoose: 1 },
          { temp: '4', isChoose: 1 },
        ]
      },
      {
        label: '21',
        value: '2100',
        data: [
          { temp: '1', isChoose: 1 },
          { temp: '2', isChoose: 1 },
          { temp: '3', isChoose: 0 },
          { temp: '4', isChoose: 0 },
        ]
      },
      {
        label: '22',
        value: '2200',
        data: [
          { temp: '1', isChoose: false },
          { temp: '2', isChoose: false },
          { temp: '3', isChoose: false },
          { temp: '4', isChoose: false },
        ]
      }
    ]

  },
  methods: {
    // 多选时间改变
    checkboxChange(e, ids) {
      this.checkListValue = []
      if (this.checkList.length > 1) {
        this.timeList.forEach((item) => {
          this.checkList.forEach((e) => {
            if (item.label == e) {
              this.checkListValue.push(item.value)
            }
          })
        })
        if (e.isChecked == false) {
          this.timeConcetAdd()
          console.log('this.checkListValue', this.checkListValue);
        } else {
          this.timeConcetReduce(e, ids)
        }
      } else {
        this.checkListValue.push(e.value)
        e.isChecked = true
      }
    },

    // 时间删除多个
    timeConcetReduce(item, ids) {
      // 选择的时间数组从大到小排序
      this.checkListValue = this.checkListValue.sort(function (a, b) {
        return a - b;
      })
      let temp = this.checkListValue.length - 1
      // 最小时间
      let min = Number(this.checkListValue[0])
      // 最大时间
      let max = Number(this.checkListValue[temp])
      console.log('min', min);
      console.log('item.value', item.value);
      this.checkList = []
      this.timeList.forEach((e, ids) => {
        if (e.isUse == 0) {
          e.isChecked = false
          // 删除点击时间前面的值
          if (Number(item.value) <= Number(e.value) && Number(e.value) <= max) {
            this.checkList.push(e.label)
            e.isChecked = true
          }
        }
      })
    },
    // 时间添加多个
    timeConcetAdd() {
      // 选择的时间数组从大到小排序
      this.checkListValue = this.checkListValue.sort(function (a, b) {
        return a - b;
      })
      let temp = this.checkListValue.length - 1
      // 最小时间
      let min = Number(this.checkListValue[0])
      // 最大时间
      let max = Number(this.checkListValue[temp])
      this.checkList = []
      this.timeList.forEach((e, ids) => {
        if (e.isUse == 0) {
          // 从大到小时间全部添加
          if (min <= Number(e.value) && Number(e.value) <= max) {
            this.checkList.push(e.label)
            e.isChecked = true
          }
        }
      })
    },
    getUserList() {
      tsTaskuserlist().then((response) => {
        console.log('userList', response)
        this.ruleForm.compereId = response.data.data.list[0].id
        this.ruleForm.ftaskno = response.data.data.list[0].ftaskno
        this.userList = response.data.data.list;
      })
        .catch(() => {
          this.userList = [];
        });
    },
    getRoomList() {
      console.log('date', moment(this.date).format('YYYY-MM-DD'));
      this.orderdate = moment(this.date).format('YYYY-MM-DD')
      listdataRoom({
        fpointName: '',
        fsiteNo: this.$store.state.user.fsiteNo,
        fpointFlag: 0,
        limit: -1,
      })
        .then((response) => {
          // console.log('response', response)
          response.data.data.list.filter((item) => {
            // console.log('item', item)
            // 时间先去除":"
            item.beginTime = "07:00"
            item.endTime = "23:00"
            let temp1 = item.beginTime.split(':')[0] + item.beginTime.split(':')[1]
            let temp2 = item.endTime.split(':')[0] + item.endTime.split(':')[1]
            // 时间转为数字
            let star = Number(temp1)
            let end = Number(temp2)
            // 当前时间
            let currentTime = this.getDateTime('current')
            let tempCurrentTime = currentTime.split(':')[0] + currentTime.split(':')[1]

            item.timeList = []
            // 再这没看到meeting
            // 时间选择弹窗数据 timeLegend
            this.timeListTemp.filter((d) => {
              // 时间在会议室开始时间 结束时间之内
              if (Number(star) <= Number(d.value) && Number(d.value) < Number(end)) {
                d.isUse = 0
                d.isChecked = false
                // 过期时间
                if (Number(d.value) < Number(tempCurrentTime)) {
                  d.isUse = 2

                  d.isChecked = true
                }

                item.timeList.push(JSON.parse(JSON.stringify(d)))
              }
            })


          })
          // 图例时间过期 timeLegend
          let temp1 = response.data.data.list[0].beginTime.split(':')[0] + response.data.data.list[0].beginTime.split(':')[1]
          let temp2 = response.data.data.list[0].endTime.split(':')[0] + response.data.data.list[0].endTime.split(':')[1]
          // 时间转为数字
          let star = Number(temp1)
          let end = Number(temp2)
          let currentTime = this.getDateTime('current')
          let tempCurrentTime = currentTime.split(':')[0] + currentTime.split(':')[1]
          var timeLegend = this.timeLegend
          for (var i in timeLegend) {
            console.log(timeLegend[i])
            if (Number(star) <= Number(timeLegend[i].value) && Number(timeLegend[i].value) < Number(end)) {
              var timeLegends = timeLegend[i].data
              for (var s in timeLegends) {
                timeLegends[s].isChoose = 0
              }
            }
            if (Number(timeLegend[i].value) < Number(tempCurrentTime)) {
              var timeLegends = timeLegend[i].data
              for (var s in timeLegends) {
                timeLegends[s].isChoose = 2
              }
            }

          }
          this.timeLegend = timeLegend
          this.roomList = response.data.data.list;
        })
        .catch(() => {
          this.roomList = [];
        });
    },
    // 时间选择
    dateChange() {
      this.getRoomList()
    },
    // 会议室名字查找
    nameChange() {
      this.getRoomList()
    },
    // 点击时间条选择时间
    roomClick(item) {
      // this.getRoomList()
      console.log("选择", item)
      this.roomSelectId = item.fpointNo
      this.checkList = []
      this.timeList.forEach((item) => {
        item.isChecked = false
      })
      // 会议室预约
      // if (item.meeting && item.meeting.length > 0) {
        // item.timeList.forEach((d, k) => {
        //   item.meeting.forEach((e) => {
        //     let itemStart = this.getDateTime(e.beginTime)
        //     let itemEnd = this.getDateTime(e.endTime)
        //     let tempItemStart = itemStart.split(':')[0] + itemStart.split(':')[1]
        //     let tempItemEnd = itemEnd.split(':')[0] + itemEnd.split(':')[1]
        //     // 时间已被预约
        //     if (Number(tempItemStart) <= Number(d.value) && Number(d.value) < Number(tempItemEnd)) {
        //       d.isUse = 1
        //       d.isChecked = true
        //     }
        //   })
        // })
      // }
      this.timeList = item.timeList
    },
    // 立即预定
    nowOrder() {
      this.ruleForm.theme = ' '
      this.ruleForm.memo = ' '
      this.ruleForm.attendances = []
      this.dialogVisible = true
      this.getUserList()
      this.orderweek = this.weekDay(this.orderdate)
      this.ordertime = this.checkList[0].split('~')[0] + '~' + this.checkList[this.checkList.length - 1].split('~')[1]
    },
    handleClose() {
      this.dialogVisible = false
    },
    submint() {
      let tempAttendances = []

      this.userList.forEach((item) => {
        if (item.id == this.ruleForm.compereId) {
          this.ruleForm.compereName = item.username
          this.ruleForm.ftaskno = item.ftaskno
        }
        this.ruleForm.attendances.forEach((e) => {
          if (item.id == e) {
            tempAttendances.push({
              fuserid: this.$store.state.user.id,
              id: "",
              //phone: item.phone,
              //email: item.email,
              //faceUrl: item.faceUrl,
            })
          }
        })
      })
      let beginTime = this.orderdate + ' ' + this.ordertime.split('~')[0]
      let endTime = this.orderdate + ' ' + this.ordertime.split('~')[1]
      let temp = {
        roomId: this.roomSelectId,
        speaker: this.ruleForm.compereName,
        speakerId: this.$store.state.user.id,
        subject: this.ruleForm.theme,
        beginTime: Date.parse(beginTime),
        endTime: Date.parse(endTime),
        address: '',
        createdTime: Date.parse(new Date()),
        //lastUpdateTime: '',
        //checkedState: 1,
        //meetingType: 0,
        //checkedTime: '',
        memo: this.ruleForm.memo,
        ftaskno: this.ruleForm.ftaskno,
        fsiteNo: this.$store.state.user.fsiteNo,
        attendances: tempAttendances,
        createdId: this.$store.state.user.id,
        equipment: [],
        goodUseDetail: []
      }
      bookingbook(temp).then((response) => {
        this.dialogVisible = false
        this.getRoomList()
      })
        .catch((response) => {
          this.$notify.error({
            title: '失败',
            message: response.data.data
          })
        });
    },
    getDateTime(d) {
      let date
      if (d == 'current') {
        date = new Date()
      } else {
        date = new Date(d)
      }
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      return h + ":" + minute
    },
    weekDay(time) {
      const weekNum = new Date(time).getDay();
      let week = "";
      switch (weekNum) {
        case 0:
          week = "星期天";
          break;
        case 1:
          week = "星期一";
          break;
        case 2:
          week = "星期二";
          break;
        case 3:
          week = "星期三";
          break;
        case 4:
          week = "星期四";
          break;
        case 5:
          week = "星期五";
          break;
        case 6:
          week = "星期六";
          break;
      }
      return week;
    }
  },

}
</script>

<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px;
}

.timeDisColor {
  background-color: #e0e2e4;
}

.timeChooseColor {
  background-color: #409eff;
}

.timer {
  width: 6%;
  height: 100%;
  font-size: 12px;
  color: #dad8d8;
  margin-right: 0;
}

.timerNum {
  width: 8%;
  height: 100%;
  font-size: 12px;
  color: #dad8d8;
  margin-right: 0;
}

.timer:last-child>uni-view {
  border-right: 1px solid #eeeeef;
}

.el-popover {
  height: 340px !important;
  overflow: hidden;
}

.onlyForm .el-input--medium {
  width: 550px !important;
}

.onlyForm .el-form-item__content .el-input--medium .el-input__inner {
  width: 550px !important;
}
</style>
